<template>
  <Table ref="tableRef" :columns="columns" :data="loadData" :alert="false" bordered :showPagination="false" />
</template>

<script setup lang="ts">
import { getOperationFeatureFun } from '@/api/applicationManagement';
import { useApplicationStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia';
const counterStore = useApplicationStore();
const { componentData } = storeToRefs(counterStore);
const props = defineProps({
  environmentUuid: {
    type: [String, Number],
    required: true,
  },
});
const tableRef = ref<any>(null);
const columns = [
  { dataIndex: 'replicas', title: '副本数', align: 'center' },
  { dataIndex: 'cpu', title: 'cpu(C)', align: 'center' },
  { dataIndex: 'internalStorage', title: '内存(Mi)', align: 'center' },
  { dataIndex: 'port', title: '端口', align: 'center' },
  { dataIndex: 'domainName', title: '域名', align: 'center' },
];

const loadData = async () => {
  if (!props.environmentUuid) return;
  const parameObj = {
    applicationCode: componentData.value.applicationCode,
    componentLabel: componentData.value.label,
    environmentUuid: props.environmentUuid,
  };
  const data = await getList(parameObj);
  return data;
};

//获取表格数据
const getList = async (parameObj: any) => {
  return await getOperationFeatureFun(parameObj).then((res) => {
    const data = res;
    return data;
  });
};

watch(
  () => props.environmentUuid,
  (newVal) => {
    nextTick(() => {
      newVal && tableRef.value.refresh(true);
    });
  },
  {
    immediate: true,
  },
);

watch(
  () => componentData,
  () => {
    nextTick(() => {
      tableRef.value.refresh(true);
    });
  },
  {
    immediate: true,
  },
);
</script>

<style scoped lang="less"></style>
